<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片视图区 -->
		<el-card>
			<!-- 搜索与添加 -->
			<el-row :gutter="20">
				<el-col :span="8">
					<el-input placeholder="请输入内容" v-model="queryInofo.query" clearable @clear="getUserList">
						<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
				</el-col>
			</el-row>
			<!-- 用户列表区 -->
			<el-table :data="userList" border stripe>
				<el-table-column label="#" type="index"></el-table-column>
				<el-table-column label="姓名" prop="username"></el-table-column>
				<el-table-column label="邮箱" prop="email"></el-table-column>
				<el-table-column label="电话" prop="mobile"></el-table-column>
				<el-table-column label="角色" prop="role_name"></el-table-column>
				<el-table-column label="状态">
					<!-- 定义插槽接收当前作用域的数据 -->
					<template slot-scope="scope">
						<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)" active-color="#13ce66"
						 inactive-color="#ff4949">
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<!-- 定义插槽接收当前作用域的数据 -->
					<template slot-scope="scope">
						<!-- 修改按钮 -->
						<el-tooltip class="item" effect="dark" content="修改" placement="bottom" :enterable="false">
							<el-button type="primary" icon="el-icon-edit" circle size="small" @click="showEditDialog(scope.row.id)"></el-button>
						</el-tooltip>
						<!-- 删除按钮 -->
						<el-tooltip class="item" effect="dark" content="删除" placement="bottom" :enterable="false">
							<el-button type="danger" icon="el-icon-delete" circle size="small" @click="removeUserById(scope.row.id)"></el-button>
						</el-tooltip>
						<!-- 分配角色按钮 -->
						<el-tooltip class="item" effect="dark" content="分配角色" placement="bottom" :enterable="false">
							<el-button type="warning" icon="el-icon-setting" circle size="small" @click="showAllotDialog(scope.row)"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页器 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInofo.pagenum"
			 :page-sizes="[1, 2, 5, 10]" :page-size="queryInofo.pagesize" layout="total, sizes, prev, pager, next, jumper"
			 :total="total">
			</el-pagination>

			<!-- 添加用户对话框 -->
			<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
				<!-- 对话框主体 -->
				<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
					<el-form-item label="用户名" prop="username">
						<el-input v-model="addForm.username"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input v-model="addForm.password"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="addForm.email"></el-input>
					</el-form-item>
					<el-form-item label="手机" prop="mobile">
						<el-input v-model="addForm.mobile"></el-input>
					</el-form-item>
				</el-form>
				<!-- 对话框底部 -->
				<span slot="footer" class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addUser">确 定</el-button>
				</span>
			</el-dialog>
			<!-- 编辑用户信息的对话框 -->
			<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
				<el-form :model="editForm" :rules="addFormRules" ref="editFomrRef" label-width="70px">
					<el-form-item label="用户名">
						<el-input v-model="editForm.username" :disabled="true">
						</el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="editForm.email">
						</el-input>
					</el-form-item>
					<el-form-item label="手机号" prop="mobile">
						<el-input v-model="editForm.mobile">
						</el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="editDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="editUser(editForm.id)">确 定</el-button>
				</span>
			</el-dialog>
			<!-- 分配角色对话框 -->
			<el-dialog
				title="分配角色"
				:visible.sync="allotDialogVisible"
				width="50%"
				@close="allotDialogClosed">
				<div>
					<p>当前用户：{{userInfo.username}}</p>
					<p>当前角色：{{userInfo.role_name}}</p>
					<p>分配角色：
					 <el-select v-model="selectedRoleId" placeholder="请选择">
					    <el-option
					      v-for="item in rolesList"
					      :key="item.id"
								:label="item.roleName"
					      :value="item.id">
					    </el-option>
					  </el-select>
					</p>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="allotDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveRolesInfo">确 定</el-button>
				</span>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			// 验证邮箱规则
			var checkEmail = (rule, value, callback) => {
				// 验证邮箱的正则表达式
				const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/

				if (regEmail.test(value)) {
					// 合法邮箱
					return callback()
				} else {
					callback(new Error('验证不通过,请输入合法的邮箱地址!'))
				}
			}
			// 验证手机规则
			var checkMobile = (rule, value, callback) => {
				// 验证手机的正则表达式
				const regMobile = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/

				if (regMobile.test(value)) {
					// 合法手机
					return callback()
				} else {
					callback(new Error('验证不通过,请输入合法的手机号!'))
				}
			}

			return {
				// 获取用户列表的参数对象
				queryInofo: {
					query: '',
					// 当前的页数
					pagenum: 1,
					// 当前每页显示多少条数据
					pagesize: 2
				},
				userList: [],
				total: 0,
				// 控制添加用户对话框的显示和隐藏
				addDialogVisible: false,
				// 添加用户的表单数据
				addForm: {
					username: '',
					password: '',
					email: '',
					mobile: ''
				},
				// 这是添加用户的表单验证规则
				addFormRules: {
					// 验证用户名
					username: [{
							required: true,
							message: '请输入用户名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					// 验证密码
					password: [{
							required: true,
							message: '请输入登录密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 15,
							message: '长度在 5 到 15 个字符',
							trigger: 'blur'
						}
					],
					// 验证邮箱
					email: [{
							required: true,
							message: '请输入邮箱',
							trigger: 'blur'
						},
						// 自定义验证规则
						{
							validator: checkEmail,
							trigger: 'blur'
						}
					],
					// 验证手机
					mobile: [{
							required: true,
							message: '请输入手机号码',
							trigger: 'blur'
						},
						// 自定义验证规则
						{
							validator: checkMobile,
							trigger: 'blur'
						}
					]
				},
				// 控制编辑用户对话框的显示和隐藏
				editDialogVisible: false,
				// 查询到的用户信息对象
				editForm: {},
				// 控制分配用户角色对话框的显示和隐藏
				allotDialogVisible: false,
				// 需要被分配角色的用户信息
				userInfo: {},
				// 角色列表
				rolesList: [],
				// 保存以选中的角色id值
				selectedRoleId: {},
			}
		},
		created() {
			this.getUserList()
		},
		methods: {
			// 获取用户列表
			async getUserList() {
				const data = await this.$http.get('users', {
					params: this.queryInofo
				})
				if (data.data.meta.status !== 200) {
					return this.$message.error('用户列表获取失败')
				}
				this.userList = data.data.data.users
				this.total = data.data.data.total
			},
			// 监听改变pagesize的事件
			handleSizeChange(newSize) {
				this.queryInofo.pagesize = newSize
				// 调用函数
				this.getUserList()
			},
			// 监听页码值改变的事件
			handleCurrentChange(newPage) {
				this.queryInofo.pagenum = newPage
				// 调用函数
				this.getUserList()
			},
			// 监听 switch 开关状态的改变
			async userStateChanged(userInfo) {
				const data = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`)

				if (data.data.meta.status !== 200) {
					// 如果更新失败提示用户!并取反状态
					userInfo.mg_state = !userInfo.mg_state
					return this.$message.error('更新用户状态失败')
				}
				this.$message.success('更新状态成功！')
			},
			// 监听添加用户对话框关闭的事件
			addDialogClosed() {
				// 重置表单
				this.$refs.addFormRef.resetFields()
			},
			// 点击按钮添加用户
			addUser() {
				this.$refs.addFormRef.validate(async (valid) => {
					// 表单预验证判断
					if (!valid) {
						return
					} else {
						// 可以发起请求
						const data = await this.$http.post('users', this.addForm)
						if (data.data.meta.status !== 201) {
							return this.$message.error('添加用户失败！')
						} else {
							this.$message.success('添加用户成功！')
							// 隐藏添加用户对话框
							this.addDialogVisible = false
							// 重新获取用户列表
							this.getUserList()
						}
					}

				})
			},
			// 展示编辑用户的对话框
			async showEditDialog(id) {
				// 向服务器发起axios请求获取用户信息
				const data = await this.$http.get('users/' + id)
				if (data.data.meta.status !== 200) {
					return this.$message.error('查询用户失败！')
				}
				// 把查询的值赋值给editForm对象
				this.editForm = data.data.data
				this.editDialogVisible = true
			},
			// 监听编辑用户对话框关闭的事件
			editDialogClosed() {
				// 重置表单
				this.$refs.editFomrRef.resetFields()
			},
			// 点击按钮编辑用户信息并提交
			editUser(id) {
				// 表单预验证
				this.$refs.editFomrRef.validate(async (valid) => {
					if(!valid) {
						return this.$message.error('表单预验证失败！')
					}
					// 发起编辑用户的信息请求
					const data = await	this.$http.put('users/' + id, this.editForm)
					// 判断状态码
					if(data.data.meta.status !== 200) {
						return this.$message.error('编辑失败！')
					}
					
					this.$message.success('编辑成功！')	
					this.getUserList()
					this.editDialogVisible = false
				})
			},
			// 点击按钮根据ID删除用户
			async	removeUserById(id) {
				// 询问是否删除用户
				const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch((error) => {  //捕获用户取消行为
					return error
        })
				
				// 如果用户点击了确定返回字符串 confirm
				// 如果用户点击了取消返回字符串 cancel
				if(confirmResult !== 'confirm') {
					return this.$message.info('已取消删除')
				}
				
				// 发起axios请求
				const data = await	this.$http.delete('users/' + id)
				if(data.data.meta.status !== 200) {
					return this.$message.error('删除用户失败！')
				}
				this.$message.success('删除用户成功！')
				// 重新获取用户列表
				this.getUserList()
			},
			// 展示分配用户角色的对话框
			async showAllotDialog(userInfo) {
				// 保存当前需要被分配角色的用户数据
				this.userInfo = userInfo
				// 发起axios请求
				const data = await this.$http.get('roles')
				if (data.data.meta.status !== 200) {
					return this.$message.error('获取角色列表失败！')
				}
				// 保存角色列表
				this.rolesList = data.data.data
				console.log(this.rolesList)
				this.allotDialogVisible = true
			},
			// 点击按钮分配角色
			async saveRolesInfo() {
				// 判断selectedRoleId是否为空
				if(!this.selectedRoleId) {
					return this.$message.error('请选择要分配的角色')
				}
				
				// 发起请求
				const data = await this.$http.put(`users/${this.userInfo.id}/role`, {
					rid : this.selectedRoleId
				})
				
				// 判断状态码
				if(data.data.meta.status !== 200) {
					return this.$message.error('更新角色失败！')
				}
				this.$message.success('更新角色成功！')
				this.getUserList()
				this.allotDialogVisible = false
			},
			// 关闭分配角色对话框函数
			allotDialogClosed() {
				this.selectedRoleId = {}
				this.userInfo = {}
			}
		}
	}
</script>

<style lang="less" scoped>

</style>
